<!DOCTYPE html>
<html>
    <head>
        <title>grid网格</title>

        <style>
            .grid-box-1 {
                border: 1px solid #999;
                width: 300px;
                height: 200px;
                display: grid;
                margin: 20px;
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: 1fr 1fr;
                grid-auto-rows: 40px; /**超出指定的行数，列数就自动加 */
            }

            .grid-box-1 > div {
                background-color: bisque;
                border-radius: 4px;
                border: 1px solid #ccc;
            }

            .grid-box-1 > div:nth-last-of-type(1) {
                grid-area: 1/1/2/4;
            }
            .grid-box-1 > div:nth-last-of-type(2) {
                grid-row: 2/4;
            }
            .grid-box-1 > div:nth-last-of-type(3) {
                grid-column: 2/ span 2;
            }
            .grid-box-1 > div:nth-last-of-type(6) {
                grid-column: 1/ span 3;
            }

            .grid-box-6 {
                border: 1px solid #999;
                display: grid;
                margin: 20px;

                grid-template-columns: repeat(auto-fill, minmax(50px,1fr));
            }
            .grid-box-6 > div {
                height: 50px;
                background-color: bisque;
                border-radius: 4px;
                border: 1px solid #ccc;
            }
        </style>
    </head>

    <body>
        <div class="grid-box-6">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </body>
</html>